<template>
  <div class="login_container">
    <van-nav-bar title="登录" />
    <div class="welcome-content">
      <div class="left-content">
        <div class="title">欢迎进入不良事件上报管理系统</div>
        <div class="sub-title">登录账号一键开启工作</div>
      </div>
      <div class="right-content">
        <van-image
          width="100"
          height="100"
          :src="require('@/assets/login/login-img.png')"
        />
      </div>
    </div>
    <div class="login_form">
      <van-cell-group>
        <van-field
          v-model="form.username"
          :label-width="50"
          left-icon="manager"
          label="账号"
          clearable
          placeholder="请输入用户名"
          @focus="focusHandle"
        />
        <van-field
          v-model="form.password"
          left-icon="lock"
          :label-width="50"
          clearable
          type="password"
          label="密码"
          placeholder="请输入密码"
          @focus="focusHandle"
        />
        <van-field
          v-model="form.code"
          left-icon="shield-o"
          :label-width="50"
          clearable
          label="验证码"
          placeholder="请输入验证码"
          @focus="focusHandle"
        >
          <template #button>
            <van-image
              width="100"
              height="21"
              :src="codeUrl"
              @click="getCaptchaImage"
            />
          </template>
        </van-field>
      </van-cell-group>
    </div>
    <div class="login_btn">
      <van-button
        type="info"
        :loading="loading"
        loading-type="spinner"
        block
        :loading-text="loadingText"
        @click="login"
      >
        登录
      </van-button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { getCaptchaImage, login, getUserInfo } from "@/api/login";
export default {
  data() {
    return {
      loading: false,
      loadingText: "", // 按钮上的加载
      codeUrl: "",
      form: {
        username: "admin",
        password: "admin123",
        code: "",
      },
    };
  },
  created() {
    this.getCaptchaImage();
  },
  methods: {
    //登录
    login() {
      if (!this.form.code) {
        this.$toast("请填写验证码");
        return;
      }
      this.loadingText = "登录中...";
      this.loading = true;
      login(this.form)
        .then((res) => {
          Vue.ls.set("token", res.data.token);
          this.getUserInfo();
        })
        .catch(() => {
          setTimeout(() => {
            this.getCaptchaImage();
          }, 1000);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //获取userInfo
    getUserInfo() {
      getUserInfo().then((res) => {
        Vue.ls.set("userInfo", res.data);
        this.initData();
        this.$router.push({
          path: "/",
        });
      });
    },
    initData() {
      this.form = {
        username: "",
        password: "",
        code: "",
      };
    },
    //获取图形验证码
    getCaptchaImage() {
      getCaptchaImage().then((res) => {
        const captchaEnabled =
          res.data.captchaEnabled === undefined
            ? true
            : res.data.captchaEnabled;
        if (captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.data.img;
          this.form.uuid = res.data.uuid;
        }
      });
    },
    focusHandle() {
      this.isUserError = false;
      this.isPassError = false;
    },
  },
};
</script>

<style lang="scss">
.login_container {
  .welcome-content {
    color: #fff;
    height: 200px;
    background-image: url("~@/assets/login/login-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;

    .left-content {
      .title {
        font-size: 16px;
        margin-bottom: 12px;
      }
      .sub-title {
        font-size: 14px;
      }
    }

    .right-content {
      margin-left: -48px;
    }
  }
  .login_form {
    padding: 12px;
    margin-top: -30px;
    background: #fff;
    border-radius: 20px;
  }
  .login_btn {
    padding: 12px;
    margin-top: 50px;
  }
}
</style>
